<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>含判断条件的流程图</title>
    <style>
        /* 基础样式保持原设计 */
        body { font-family: Arial, sans-serif; max-width: 1200px; margin: 20px auto; padding: 20px; }

        /* 新增判断节点样式 */
        .decision {
            width: 120px;
            height: 120px;
            background: #fff0f0;
            border: 2px solid #ff4444;
            transform: rotate(45deg);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .decision-text {
            transform: rotate(-45deg);
            font-weight: bold;
            color: #ff4444;
        }

        /* 分支连接线样式 */
        .branch-connector {
            position: absolute;
            width: 80px;
            height: 2px;
            background: #ff4444;
        }

        .branch-connector::after {
            content: '▶';
            position: absolute;
            right: -12px;
            top: -8px;
            color: #ff4444;
        }

        /* 垂直分支线 */
        .vertical-connector {
            width: 2px;
            height: 80px;
            left: 50%;
            top: 100%;
        }

        /* 调整原连接线位置 */
        .flowchart { position: relative; }

        /* 退款处理分支样式 */
        .refund-branch {
            position: absolute;
            left: 50%;
            top: 300px;
            display: flex;
            gap: 40px;
        }
    </style>
</head>
<body>
    <h1>含退款判断的订单流程</h1>

    <div class="flowchart">
        <!-- 主流程 -->
        <div class="step">订单接收<div class="connector"></div></div>
        <div class="step">支付处理<div class="connector"></div></div>

        <!-- 判断节点 -->
        <div class="decision">
            <div class="decision-text">需要退款？</div>

            <!-- 是分支连接线 -->
            <div class="branch-connector vertical-connector"></div>

            <!-- 否分支连接线 -->
            <div class="branch-connector"
                 style="transform: rotate(30deg); top: 35%; left: 110%;"></div>
        </div>

        <!-- 正常流程 -->
        <div class="step" style="margin-left: 200px;">商品发货<div class="connector"></div></div>
        <div class="step">订单完成</div>

        <!-- 退款分支 -->
        <div class="refund-branch">
            <div class="branch-connector vertical-connector"
                 style="height: 40px; left: -20px;"></div>
            <div class="step" style="background: #fff0f0; border-color: #ff4444;">
                退款审批
                <div class="connector"></div>
            </div>
            <div class="step" style="background: #fff0f0; border-color: #ff4444;">
                退款处理
            </div>
        </div>
    </div>

    <div class="explanation">
        <h3>判断逻辑说明：</h3>
        <p>当系统检测到退款请求时：</p>
        <ul>
            <li><strong>是分支（红色路径）：</strong>
                <ol>
                    <li>冻结订单物流操作</li>
                    <li>发起财务审批流程</li>
                    <li>原支付渠道退回款项</li>
                    <li>更新订单状态为"已退款"</li>
                </ol>
            </li>
            <li><strong>否分支（绿色路径）：</strong>
                <ol>
                    <li>正常进行商品打包</li>
                    <li>分配物流运单号</li>
                    <li>同步库存数据</li>
                    <li>标记订单为"已完成"</li>
                </ol>
            </li>
        </ul>
    </div>
</body>
</html>